<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{arr.length}}</strong></span>
    <ul class="filters">
      <li @click="changeBtn('all')">
        <!-- // all表示全部 -->
        <a :class="{selected: 'all' === curType}" href="javascript:;" >全部</a>
      </li>
      <li @click="changeBtn('no')">
        <!-- // no表示未完成 -->
        <a :class="{selected: 'no' === curType}" href="javascript:;">未完成</a>
      </li>
      <li  @click="changeBtn('yes')">
        <!-- yes 表示已完成 -->
        <a :class="{selected: 'yes' === curType}" href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearFn" >清除已完成</button>
  </footer>
</template>

<script>
/**
 * 需求1：点击底部切换 - 点谁谁有边框
 *  我们需要通过selected类名来控制是否显示边框
 * 其实，我们只要点谁给谁添加selected类名即可
 * 1、我们需要知道用户点击的谁，我们可以给3个按钮分别制定一个标识符（all, no, yes）,
 * 当用户点击 按钮的时候，我们只需要把按钮的标识符保存起来，那么我们就可以通过这个标识符判断用户点了谁
 * 2、动态设置类名，只需要根据按钮各自的标识符和保存起来的标识符进行判断，如果两个值相等，说明用户点了改按钮
 * 则给他selected类名。
 * 
 * 需求2：点击底部按钮，切换显示不同的数据
 * 筛选数据在父组件中计算属性中进行，最终结果返回给计算属性，然后用户渲染
 * 1、给按钮绑定点击事件（上午需求1中已完成）
 * 2、在事件处理函数中“子传父” 把用户点击的按钮标识符curType传递给父组件
 * 3、父组件中，绑定自定义事件，然后再事件处理函数中接收并保存curType
 * 4、父组件中，声明计算属性showArr用来筛选显示的数据，根据保存的curType进行筛选即可
 * 
* */ 
export default {
  props: ["arr"],
  data(){
    return {
      curType: "all"
    }
  },
  methods: {
    changeBtn(type){
      this.curType = type
      // 子传父
      this.$emit("changeEnvet", this.curType)
    },
    clearFn(){
      // 子传父 通知父组件清空已完成的数据
      this.$emit("clearEvent")
    }
  }
}
</script>